<script setup>
import { ref } from 'vue'
import headerBar from '../component/headerBar.vue'
import customerDetails from './customerDetails.vue'
const groupList = [
	{
		id: 1,
		children: [
			{
				title: '已入群客户',
				num: 0
			},
			{
				title: '未入群客户',
				num: 1
			}
		]
	},
	{
		id: 2,
		children: [
			{
				title: '已邀请客户 ',
				num: 1,
				toolTip: '邀请客户列表中，已收到成员推送的入群邀请的客户数'
			},
			{
				title: '未邀请客户 ',
				num: 0,
				toolTip: '邀请客户列表中，未收到成员推送的入群邀请的客户数'
			}
		]
	},
	{
		id: 3,
		children: [
			{
				title: '完成发送成员 ',
				num: 1,
				toolTip:
					'已将邀请客户入群的群发任务，群发给客户的员工数，若成员收到了多条邀请群发的任务，需将全部推送都发送，则视为已发送'
			},
			{
				title: '未完成发送成员 ',
				num: 0,
				toolTip:
					'收到群发任务的成员，未发送群发邀请的成员数。若成员收到了多条邀请群发的任务，有一条未发送的任务，则视为未完成'
			}
		]
	}
]
const activeKey = ref(1)
</script>
<template>
	<div class="main">
		<headerBar :title="'详情'" />
		<div class="content">
			<div class="top-part">
				<div class="left">
					<p class="graph">
						<span class="intro">邀请入群条件</span> <el-divider direction="vertical" /><span>已有0人入群</span>
					</p>
					<div class="brief">成员张磊中的满足标签「」添加时间为2022-10-25~2022-10-26、的1位客户</div>
					<div class="group-part">
						<span class="title">群聊：</span>
						<div class="group">
							<div class="group-item">
								<img
									class="group-icon"
									src="../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
								/>
								<div class="info">
									<span class="ame-popover-slot"><p class="title">张磊,刘银豪,三森</p></span>
									<p class="num">
										<span>3/200人</span>
										<el-divider direction="vertical" />
										<span>本次入群：0人</span>
									</p>
								</div>
							</div>
							<div class="clickable">
								<el-tooltip effect="light" placement="bottom">
									<template #content>
										<img
											class="qr-img"
											src="https://weibanzhushou-pri.oss-accelerate.aliyuncs.com/1747535423434273793%2Finvite_group%2FwogizUDQAAOn_Yu3HqqR2SaFqBFElIbA%2Fl9ozhnk8bv5_l9ozhne023wj1666749285288?OSSAccessKeyId=LTAI4Fr8tiMeQjtK8XXDfUza&Expires=1666939425&Signature=qS%2FOmcMZYLYX%2FEKzh8Gy3QdQgMg%3D"
										/>
									</template>
									<img
										src="../../../../assets/img/img/tag-group-invitate_qr-icon.6527405bdc01.svg"
									/>
								</el-tooltip>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<p>客户统计</p>
					<div class="data-wrap">
						<div class="data" v-for="item in groupList" :key="item.id">
							<div class="inner" v-for="(child, index) in item.children" :key="index">
								<span class="num">{{ child.num }}</span>
								<span
									>{{ child.title }}
									<el-tooltip placement="top" effect="light">
										<template #content>
											<p style="max-width: 380px; font-size: 15px">{{ child.toolTip }}</p>
										</template>
										<MyIcon v-if="child.toolTip" class="question-icon" name="Question"
									/></el-tooltip>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="bottom-part">
				<el-tabs v-model="activeKey">
					<el-tab-pane label="客户详情" :name="1">
						<customerDetails :activeKey="activeKey" />
					</el-tab-pane>
					<el-tab-pane label="成员详情" :name="2"><customerDetails :activeKey="activeKey" /></el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.main {
	width: 100%;
	height: 100%;
	:deep(.el-tabs) {
		--el-tabs-header-height: 50px;
	}
	:deep(.el-tabs__item) {
		font-size: 16px;
	}
	:deep(.el-tabs__item.is-active) {
		font-weight: 600;
	}
	:deep(.el-tabs__nav-wrap::after) {
		display: none;
	}
	:deep(.el-tabs__header) {
		// height: 50px;
		// line-height: 50px;
		margin-top: 15px;
		padding-left: 24px;
		font-size: 16px;
		background-color: #fff;
		border-bottom: 1px solid #f2f2f2;
	}
	.content {
		width: 100%;
		padding: 16px;
		.clickable {
			display: flex;
			justify-self: self-end;
			width: 12px;
			height: 12px;
			cursor: pointer;
			.qr-img {
				max-height: 261px;
				max-width: 158px;
				border: 1px solid #eee;
			}
		}
		.num {
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			font-size: 12px;
			line-height: 22px;
			color: #999;
			opacity: 0.85;
		}
		.top-part {
			width: 100%;
			display: flex;
			align-items: center;
			.left {
				width: 373px;
				height: 199px;
				background: #fff;
				margin-right: 16px;
				padding-top: 20px;
				padding-left: 24px;
				padding-right: 22px;
				.graph {
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					font-size: 12px;
					line-height: 17px;
					color: rgba(0, 0, 0, 0.65);
					.intro {
						display: inline-block;
						position: relative;
						font-weight: 700;
						font-size: 16px;
						line-height: 22px;
						color: #222;
					}
				}
				.brief {
					width: 100%;
					max-height: 68px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					line-clamp: 4;
					-webkit-box-orient: vertical;
					margin-top: 8px;
					font-size: 12px;
					line-height: 17px;
					color: rgba(0, 0, 0, 0.45);
				}
				.group-part {
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					position: relative;
					margin-top: 8px;
					.title {
						word-break: keep-all;
						font-size: 13px;
						line-height: 18px;
						color: rgba(0, 0, 0, 0.85);
					}
					.group {
						display: flex;
						-webkit-box-align: center;
						align-items: center;
						justify-content: space-between;
						padding: 9px 14px 6px 12px;
						width: 289px;
						background: #fbfbfb;
						border: 1px solid #eee;
						box-sizing: border-box;
						border-radius: 1px;
						.group-item {
							display: flex;
						}
						.group-icon {
							width: 32px;
							height: 32px;
							border-radius: 3px;
							margin-right: 8px;
							.info {
								-webkit-box-flex: 1;
								flex: 1;
								width: 100%;
								overflow: hidden;
								position: relative;
								.title {
									font-weight: 700;
									font-size: 13px;
									line-height: 22px;
									color: #222;
									overflow: hidden;
									text-overflow: ellipsis;
									word-break: keep-all;
									white-space: nowrap;
									opacity: 0.85;
									cursor: auto;
								}
							}
						}
					}
				}
			}
			.right {
				flex: 1;
				padding: 20px 18px 38px;
				height: 199px;
				background: #fff;
				box-sizing: border-box;
				p {
					font-weight: 700;
					font-size: 16px;
					line-height: 22px;
					color: #222;
				}
				.data-wrap {
					margin-top: 20px;
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					-webkit-box-pack: justify;
					justify-content: space-between;
					.data {
						display: flex;
						-webkit-box-align: center;
						align-items: center;
						flex-basis: auto;
						flex: 1;
						height: 99px;
						background: #fbfdff;
						border: 1px solid #daedff;
						box-sizing: border-box;
						border-radius: 1px;
						.inner {
							position: relative;
							display: flex;
							-webkit-box-orient: vertical;
							-webkit-box-direction: normal;
							flex-direction: column;
							-webkit-box-align: center;
							align-items: center;
							flex-basis: 50%;
							flex-shrink: 0;
							-webkit-box-flex: 0;
							flex-grow: 0;

							.question-icon {
								margin-left: 5px;
								font-size: 16px;
								cursor: pointer;
							}
							span {
								display: inline-flex;
								align-items: center;
								font-size: 13px;
								line-height: 18px;
								color: rgba(0, 0, 0, 0.45);
							}
							span.num {
								font-weight: 600;
								font-size: 28px;
								line-height: 39px;
								color: #222;
							}
						}
						.inner:first-child::after {
							position: absolute;
							width: 1px;
							height: 50px;
							background: #efefef;
							content: '';
							display: block;
							right: 0;
							top: 50%;
							-webkit-transform: translateY(-50%);
							transform: translateY(-50%);
						}
					}
					.data:nth-child(2) {
						margin: 0 12px;
					}
				}
			}
		}
		.bottom-part {
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			flex-direction: column;
			-webkit-box-flex: 1;
			flex: 1;
			margin-top: 16px;
			background-color: #fff;
		}
	}
}
</style>
